<!doctype html>

<head>
    <title>Threebox Basic Example</title>
    <script include="threebox" src="./static/libs/include-mapboxgl-local.js"></script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map' class='map'></div>

    <script>
        //mapbox服务数据的访问令牌，若使用mapbox提供的样式必须要设置令牌
        mapboxgl.accessToken =
            'pk.eyJ1Ijoid29ya2luZ2RvZyIsImEiOiJjamQyZmszenczMHRoMzRuczVzaGthbGhnIn0.HTkYTE-R82N3azqscSyHkA';        
        var origin = [-122.4340, 37.7353, 1000];
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v9',
            center: origin,
            zoom: 15.95,
            pitch: 60,
            heading: 41,
            hash: true
        });

        map.on('load', function () {
            map.addLayer({
                id: 'custom_layer',
                type: 'custom',
                onAdd: function (map, gl) {
                    onAdd(map, gl);
                },
                render: function (gl, matrix) {
                    threebox.update(Date.now(), 'mbx');
                }
            });
        });

        function onAdd(map, mbxContext) {
            window.threebox = new Threebox(map, mbxContext);
            threebox.setupDefaultLights();

            // initialize geometry and material of our cube object
            var geometry = new THREE.BoxGeometry(2000, 2000, 2000);

            var redMaterial = new THREE.MeshPhongMaterial({
                color: 0x660000,
                side: THREE.DoubleSide
            });

            cube = new THREE.Mesh(geometry, redMaterial);
            cube.userData.name = "Red cube";

            threebox.addAtCoordinate(
                cube,
                origin, {
                    preScale: 1
                }
            );

            function budge() {
                origin[0] += 0.001;
                threebox.moveToCoordinate(cube, origin)
                requestAnimationFrame(budge)
            }

            budge()
        }
    </script>
</body>